<template>
  <div class="appointmentList-view">
    <ecommerce v-if="type ==  1"></ecommerce>
    <festival  v-if="type ==  2"></festival>
    <departmentStore v-if="type ==  3"></departmentStore>
    <numericalCode v-if="type ==  4"></numericalCode>
  </div>
</template>

<script>
import ecommerce from "./template/ecommerce";
import festival from "./template/festival";
import departmentStore from "./template/departmentStore";
import numericalCode from "./template/numericalCode"

export default {
  name: "appointmentList",
  data() {
    
    return {
      type:""
    };
  },
  components:{
    ecommerce,
    festival,
    departmentStore,
    numericalCode
  },
  mounted(){
    this.type = this.$route.query.type
  },
  methods:{
    
  }
};
</script>

<style lang="scss" scoped>
.appointmentList-view {
  display: flex;
  background: #ffffff;
}
.phoneClass{
  padding:50px 30px 0px 30px;
  background-image:url('../../assets/images/iphonex.png') ;
  width:400px;
  height:800px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.phoneClass img{
  width: 100%;
}
.imgScroll::-webkit-scrollbar { width: 0 !important }
</style>